<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>笔记记录</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      font-size: 14px;
      background: #f5f5f5;
    }

    .container {
      display: flex;
      height: 100vh;
      min-width: 700px;
    }

    .note-list {
      width: 75%;
      min-width: 350px;
      max-width: 80%;
      background: #fff;
      border-right: 1px solid #eee;
      padding: 20px 10px 20px 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }

    /* 拖拽分隔条 */
    .resizer {
      width: 8px;
      background: #e0e0e0;
      cursor: col-resize;
      position: relative;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .resizer:hover {
      background: #007bff;
    }
    
    .resizer:active {
      background: #0056b3;
    }
    
    .resizer-handle {
      width: 4px;
      height: 40px;
      background: #999;
      border-radius: 2px;
      transition: background-color 0.2s;
    }
    
    .resizer:hover .resizer-handle {
      background: #fff;
    }
    
    .resizer:active .resizer-handle {
      background: #fff;
    }

    .note-list-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .note-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .note-table th,
    .note-table td {
      border: 1px solid #e0e0e0;
      padding: 6px 8px;
      text-align: left;
    }

    .note-table th {
      background: #f0f0f0;
    }

    .note-table tr:hover {
      background: #f9f9f9;
    }

    .form-area {
      flex: 1;
      min-width: 220px;
      padding: 30px 30px 30px 20px;
      background: #fafbfc;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .form-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .form-group {
      margin-bottom: 10px;
    }

    label {
      display: block;
      margin-bottom: 3px;
      font-weight: bold;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
    }

    textarea {
      height: 60px;
      resize: vertical;
    }

    button {
      width: 100%;
      padding: 8px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      margin-top: 10px;
      font-size: 15px;
    }

    button:hover {
      background-color: #45a049;
    }

    button:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }

    .pagination-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2px;
      margin: 0;
      font-size: 14px;
      flex-wrap: nowrap;
    }

    .pagination-bar button {
      min-width: 28px;
      padding: 2px 7px;
      border: 1px solid #ccc;
      background: #fff;
      color: #333;
      border-radius: 3px;
      cursor: pointer;
      margin: 0 1px;
      font-size: 14px;
      transition: background 0.2s;
    }

    .pagination-bar button[disabled],
    .pagination-bar button:disabled {
      background: #e0e0e0;
      color: #888;
      cursor: not-allowed;
      font-weight: bold;
    }

    .pagination-bar .active-page {
      background: #4CAF50;
      color: #fff;
      font-weight: bold;
      border-color: #4CAF50;
    }

    .note-table .edit-btn {
      padding: 2px 3px;
      font-size: 12px;
      min-width: 20px;
      border-radius: 2px;
      margin: 0 0 0 4px;
      background: #e3f2fd;
      color: #1976d2;
      border: 1px solid #90caf9;
      cursor: pointer;
      transition: background 0.2s;
    }

    .note-table .edit-btn:hover {
      background: #bbdefb;
      color: #0d47a1;
    }

    .note-table .detail-btn {
      padding: 2px 3px;
      font-size: 12px;
      min-width: 60px;
      border-radius: 2px;
      margin: 0;
      background: #e8f5e9;
      color: #388e3c;
      border: 1px solid #b2dfdb;
      cursor: pointer;
      transition: background 0.2s;
    }

    .note-table .detail-btn:hover {
      background: #c8e6c9;
      color: #1b5e20;
    }

    .note-table .delete-btn {
      padding: 2px 3px;
      font-size: 12px;
      min-width: 20px;
      border-radius: 2px;
      margin: 0 0 0 4px;
      background: #ffebee;
      color: #d32f2f;
      border: 1px solid #ffcdd2;
      cursor: pointer;
      transition: background 0.2s;
    }

    .note-table .delete-btn:hover {
      background: #ffcdd2;
      color: #b71c1c;
    }

    .note-table .review-single-btn {
      padding: 2px 3px;
      font-size: 12px;
      min-width: 5px;
      border-radius: 2px;
      margin: 0 0 0 4px;
      background: #fff3e0;
      color: #e65100;
      border: 1px solid #ffcc02;
      cursor: pointer;
      transition: background 0.2s;
    }

    .note-table .review-single-btn:hover {
      background: #ffe0b2;
      color: #bf360c;
    }

    .note-table .pin-btn {
      padding: 2px 3px;
      font-size: 12px;
      min-width: 20px;
      border-radius: 2px;
      margin: 0 0 0 4px;
      background: #e8f5e9;
      color: #388e3c;
      border: 1px solid #b2dfdb;
      cursor: pointer;
      transition: background 0.2s;
    }

    .note-table .pin-btn:hover {
      background: #c8e6c9;
      color: #1b5e20;
    }

    .note-table .unpin-btn {
      padding: 2px 3px;
      font-size: 12px;
      min-width: 20px;
      border-radius: 2px;
      margin: 0 0 0 4px;
      background: #fff3e0;
      color: #e65100;
      border: 1px solid #ffcc02;
      cursor: pointer;
      transition: background 0.2s;
    }

    .note-table .unpin-btn:hover {
      background: #ffe0b2;
      color: #bf360c;
    }

    .rich-content {
      padding: 4px 0;
      word-break: break-all;
      overflow-x: auto;
      font-size: 14px;
      line-height: 1.7;
      color: #222;
    }

    .rich-content img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 6px 0;
    }

    .rich-content pre {
      background: #f6f8fa;
      padding: 8px;
      border-radius: 4px;
      overflow-x: auto;
      font-size: 13px;
    }

    .rich-content code {
      background: #f6f8fa;
      padding: 2px 4px;
      border-radius: 3px;
      font-size: 13px;
    }

    .edit-modal {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.18);
      padding: 24px 24px 12px 24px;
      width: 380px;
      max-width: 96vw;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 10001;
    }

    #editModalMask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.18);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .edit-modal-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 16px;
      text-align: left;
    }

    .review-btn {
      padding: 3px 20px;
      background-color: #ff9800;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 13px;
      font-weight: bold;
      transition: background-color 0.2s;
      white-space: nowrap;
    }

    .review-btn:hover {
      background-color: #f57c00;
    }

    .note-list-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15px;
    }

    /* 全屏编辑弹窗样式 */
    .fullscreen-modal {
      width: 98vw !important;
      height: 96vh !important;
      max-width: none !important;
      max-height: none !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      z-index: 10002 !important;
      padding: 32px 32px 16px 32px !important;
      box-sizing: border-box !important;
      overflow: auto !important;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 左侧笔记列表 -->
    <div class="note-list">
      <!-- 置顶笔记区域 -->
      <div id="pinnedNotesSection" style="margin-bottom: 20px; display: none;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom: 15px;">
          <span style="font-size:16px;">📌</span>
          <span style="font-size:18px;font-weight:bold;">置顶笔记</span>
        </div>
        <table class="note-table" id="pinnedNoteTable">
          <colgroup>
            <col style="width: 5%;">
            <col style="width: 18%;">
            <col style="width: 8%;">
            <col style="width: 8%;">
            <col style="width: 12%;">
            <col style="width: 10%;">
            <col style="width: 18%;">
          </colgroup>
          <thead>
            <tr>
              <th>主键</th>
              <th>标题</th>
              <th>类型</th>
              <th>关键词</th>
              <th>来源</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="pinnedNoteTableBody">
            <tr>
              <td colspan="7" style="text-align:center;color:#aaa;">加载中...</td>
            </tr>
          </tbody>
        </table>
        <div style="display: flex; justify-content: flex-end; align-items: flex-end; margin-top: 8px;">
          <div id="pinnedPagination" class="pagination-bar"></div>
        </div>
      </div>
      <!-- 📒笔记列表标题移动到这里 -->
      <div class="note-list-header">
        <div class="note-list-title" style="display:flex;align-items:center;gap:8px;">
          <span style="font-size:20px;">📒</span>
          <span>笔记列表</span>
        </div>
      </div>
      
      <form id="searchForm" class="search-bar"
        style="margin-bottom: 12px;display:flex;gap:8px;flex-wrap:nowrap;align-items:center;justify-content:space-between;">
        <div style="display:flex;gap:8px;flex-wrap:nowrap;align-items:center;">
          <input type="text" id="searchTitle" placeholder="标题关键词" style="width:110px;">
          <input type="text" id="searchType" placeholder="类型关键词" style="width:90px;">
          <input type="text" id="searchSource" placeholder="来源关键词" style="width:90px;">
          <input type="text" id="searchContent" placeholder="内容关键词" style="width:120px;">
          <input type="text" id="searchThink" placeholder="思考关键词" style="width:120px;">
          <div style="display:flex;gap:4px;align-items:center;">
            <button type="submit"
              style="width:auto;padding:3px 20px;font-size:13px;margin-top:0;white-space:nowrap;">查询</button>
            <button type="button" id="resetSearchBtn"
              style="width:auto;padding:3px 16px;font-size:13px;background:#eee;color:#333;margin-top:0;white-space:nowrap;">重置</button>
          </div>
        </div>
        <div style="display:flex;gap:4px;align-items:center;">
          <button id="reviewBtn" class="review-btn" style="margin-top:0;">📚 随机复习</button>
        </div>
      </form>
      <table class="note-table" id="noteTable">
        <colgroup>
          <col style="width: 5%;">
          <col style="width: 18%;">
          <col style="width: 8%;">
          <col style="width: 8%;">
          <col style="width: 12%;">
          <col style="width: 10%;">
          <col style="width: 18%;">
        </colgroup>
        <thead>
          <tr>
            <th>主键</th>
            <th>标题</th>
            <th>类型</th>
            <th>关键词</th>
            <th>来源</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="noteTableBody">
          <tr>
            <td colspan="7" style="text-align:center;color:#aaa;">加载中...</td>
          </tr>
        </tbody>
      </table>
      <div style="display: flex; justify-content: flex-end; align-items: flex-end;">
        <div id="pagination" class="pagination-bar"></div>
      </div>
    </div>
    
    <!-- 拖拽分隔条 -->
    <div class="resizer" id="resizer">
      <div class="resizer-handle"></div>
    </div>
    
    <!-- 右侧新增笔记表单 -->
    <div class="form-area">
      <div class="form-title">📝 新增笔记</div>
      <form id="noteForm">
        <div class="form-group">
          <label for="title">标题：</label>
          <input type="text" id="title" name="title" required>
        </div>
        <div class="form-group">
          <label for="type">类型：</label>
          <div style="display:flex;align-items:center;gap:8px;">
            <select id="type" name="type" required>
              <option value="">请选择类型</option>
            </select>
            <button type="button" id="typeManageBtn" style="padding:4px 12px;font-size:13px;background:#eee;color:#333;border:1px solid #ccc;width: 25%;">类型管理</button>
          </div>
        </div>
        <div class="form-group">
          <label for="keywords">关键词：</label>
          <input type="text" id="keywords" name="keywords" placeholder="用逗号分隔多个关键词">
        </div>
        <div class="form-group">
          <label for="source">来源：</label>
          <input type="text" id="source" name="source" placeholder="请输入来源">
        </div>
        <div class="form-group">
          <label for="content">内容：</label>
          <textarea id="content" name="content" placeholder="请输入内容..."></textarea>
        </div>
        <div class="form-group">
          <label for="thoughts">思考：</label>
          <textarea id="thoughts" name="thoughts" placeholder="请输入你的思考..."></textarea>
        </div>
        <button type="submit" id="submitBtn">保存笔记</button>
      </form>
    </div>
  </div>

  <!-- 编辑笔记模态框 -->
  <div style="display:none;" id="editModalMask">
    <div id="editModal" class="edit-modal">
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
        <div class="" style="white-space:nowrap;">修改笔记</div>
        <button id="fullscreenToggleBtn" title="最大化" style="background:none;border:none;cursor:pointer;padding:0;line-height:1;align-self:flex-start;">
          <svg id="fullscreenIcon" width="22" height="22" viewBox="0 0 24 24"><path d="M4 4h7V2H2v9h2V4zm16 0v7h2V2h-9v2h7zm0 16h-7v2h9v-9h-2v7zM4 20v-7H2v9h9v-2H4z"/></svg>
        </button>
      </div>
      <form id="editForm">
        <input type="hidden" id="editId">
        <div class="form-group">
          <label for="editTitle">标题：</label>
          <input type="text" id="editTitle" name="title" required>
        </div>
        <div class="form-group">
          <label for="editType">类型：</label>
          <select id="editType" name="type" required>
            <option value="">请选择类型</option>
            <option value="读书笔记">读书笔记</option>
            <option value="反思">反思</option>
            <option value="知识点">知识点</option>
          </select>
        </div>
        <div class="form-group">
          <label for="editKeyList">关键词：</label>
          <input type="text" id="editKeyList" name="key_list">
        </div>
        <div class="form-group">
          <label for="editSource">来源：</label>
          <input type="text" id="editSource" name="source">
        </div>
        <div class="form-group">
          <label for="editContent">内容：</label>
          <textarea id="editContent" name="content" style="height:80px;"></textarea>
        </div>
        <div class="form-group">
          <label for="editThink">思考：</label>
          <textarea id="editThink" name="think" style="height:80px;"></textarea>
        </div>
        <div style="text-align:right;margin-top:10px;">
          <button type="button" id="editCancelBtn" style="margin-right:10px;background:#eee;color:#333;">取消</button>
          <button type="submit" id="editSaveBtn">确认更新</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 类型管理弹窗 -->
  <div id="typeManageModalMask" style="display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.18);z-index:10010;align-items:center;justify-content:center;">
    <div id="typeManageModal" style="background:#fff;border-radius:8px;box-shadow:0 2px 16px rgba(0,0,0,0.18);padding:24px 24px 12px 24px;width:350px;max-width:96vw;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <div style="font-size:18px;font-weight:bold;width: 25%;">类型管理</div>
        <button id="typeManageCloseBtn" style="background:none;border:none;font-size:20px;cursor:pointer;">×</button>
      </div>
      <div style="margin-bottom:12px;display:flex;align-items:center;gap:8px;">
        <input type="text" id="newTypeInput" placeholder="新类型名称" style="flex:2;min-width:0;padding:6px 8px;font-size:14px;">
        <button id="addTypeBtn" style="padding:2px 10px;font-size:14px;width: 25%;">新增</button>
      </div>
      <div>
        <table style="width:100%;border-collapse:collapse;font-size:14px;">
          <thead>
            <tr><th style="text-align:left;">类型名称</th><th style="width:50px;">操作</th></tr>
          </thead>
          <tbody id="typeListBody">
            <tr><td colspan="2" style="text-align:center;color:#aaa;">加载中...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


  <script src="popup.js"></script>
</body>

</html>